<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>

<%
	String path = request.getContextPath();
	// 获得本项目的地址(例如: http://localhost:8080/MyApp/)赋值给basePath变量 
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	// 将 "项目路径basePath" 放入pageContext中，待以后用EL表达式读出。 
	pageContext.setAttribute("basePath", basePath);
	//out.write(basePath);
%>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>用户信息添加</title>

<meta name="description"
	content="Source code generated using layoutit.com">
<meta name="author" content="LayoutIt!">

<link href="<%=basePath%>bootstrap/css/bootstrap.min.css"
	rel="stylesheet">
<link href="<%=basePath%>bootstrap/css/style.css" rel="stylesheet">

<style type="text/css">
/**文本框内容右对齐**/
label {
	text-align: right;
}
/**自定义row的行距**/
.rowHeigth {
	margin-top: 10px;
}
</style>
	<script src="<%=basePath%>bootstrap/js/jquery.min.js"></script>
	<script src="<%=basePath%>bootstrap/js/bootstrap.min.js"></script>
	<script src="<%=basePath%>bootstrap/js/scripts.js"></script>
	
<script type="text/javascript">
$(function(){
	
	//*********************下拉选择框赋值****************************//
	//console.info("age:"+$("#hiddenselectAge")[0].value);
	var currentAge = $("#hiddenselectAge")[0].value;
	//没有获取到年龄，或者后台没有传入年龄（新增操作）
	if(currentAge == undefined || currentAge == ""){
		//设置默认值为18
		currentAge = 18;
	} 
	//$("#txtUserAge").val($("#hiddenselectAge")[0].value);
	// 设置下拉选择框的选中选项
	$("#txtUserAge").val(currentAge);
	
	//*********************性别单选框赋值*********************//
	//获取需要绑定事件的控件
		//使用 模糊匹配选择器选择 所有的单选框对象，并使用each函数遍历每个单选框对象
		$("input[name^='selectSext']").each(function(){
			//给每一个单选框绑定一个自定名为 myOnLoad 的事件
			$(this).bind("myOnLoad",function(){
				//自定事件的处理业务	
				// 获取需要绑定的 性别的隐藏属性值（el表达式获取了服务器传过来的值）
				var val = $("#hiddensex").get(0).value;
				//console.info("val=:"+val);
				//如果当前正在遍历的单选框的属性值 等于 服务器传过来的值		
				if($(this).attr("value") == val){
					
					//绑定checked属性
					//console.info("if this:::"+$(this).attr("value"));
					//$(this).attr({ checked: "checked"});// ff 不可用  其他浏览器 未测试
					//$(this).attr("checked","");// ff 不可用  其他浏览器 未测试
					//$(this).prop("checked");// ff 不可用  其他浏览器 未测试
					//$(this).is(":checked");// ff 不可用  其他浏览器 未测试
					// 将jquery对象转换为原生dom对象，然后设定 选择属性的值为True
					$(this)[0].checked="checked";
				}else{
					//console.info("else this:"+$(this));
					$(this).removeAttr("checked");
					}
				}
			);			
			//触发该自定义的事件（自动执行）
			$(this).trigger("myOnLoad");
			//或者
			//$(this).myOnLoad(); // ff 不可用  其他浏览器 未测试
	});
	
});

</script>
</head>
<body>

	<form action="<%=basePath%>UserInfoAddServlet" method="post">

		<div class="container-fluid">
			<div class="row rowHeigth">

				<input type="hidden" id="txtUserId" name="txtUserId"
					value="${requestScope.usersB.userid }">
					
				<input type="hidden" id="hiddensex"
					value="${requestScope.usersB.usersex }">
					
				<input type="hidden" id="hiddenselectAge"
					value="${requestScope.usersB.userage }">

				<div class="form-group">
					<label class="col-sm-2 control-label">用户名</label>
					<div class="col-sm-4">
						<input type="text" class="form-control" id="txtUserName"
							name="txtUserName" value="${requestScope.usersB.username }"
							placeholder="用户名">
					</div>

					<label class="col-sm-2 control-label">性别</label>
					<div class="col-sm-4">
					<label class="radio-inline"> 
						<input type="radio"	name="selectSext" id="selectSext1" value="女"  > 女
						</label> <label class="radio-inline"> <input type="radio"
							name="selectSext" id="selectSext2" value="男" > 男
						</label>
					
						<%-- <label class="radio-inline"> 
						<input type="radio"	name="selectSext" id="selectSext1" value="女" <c:if test="${requestScope.usersB.usersex =='女' }">checked</c:if>  > 女
						</label> <label class="radio-inline"> <input type="radio"
							name="selectSext" id="selectSext2" value="男" <c:if test="${requestScope.usersB.usersex =='男' }">checked</c:if>> 男
						</label> --%>
					</div>
				</div>

			</div>


			<div class="row rowHeigth">
				<div class="form-group">
					<label class="col-sm-2 control-label">密码</label>
					<div class="col-sm-4">
						<input type="password" class="form-control" id="txtUserPsw"
							name="txtUserPsw" value="${requestScope.usersB.userpsw }"
							placeholder="密码">
					</div>

					<label class="col-sm-2 control-label">确认密码</label>
					<div class="col-sm-4">
						<input type="password" class="form-control" id="txtUserPsw2"
							name="txtUserPsw2" value="${requestScope.usersB.userpsw }"
							placeholder="确认密码">
					</div>
				</div>

			</div>

			<div class="row rowHeigth">

				<div class="form-group">
					<label class="col-sm-2 control-label" for="txtUserAge">年龄</label>
					<div class="col-sm-4">
						<select class="form-control" id="txtUserAge" name="txtUserAge">
							<c:forEach begin="18" end="60" varStatus="st">
								<option value="${st.index }">${st.index }</option>
							</c:forEach>							
						</select>


					</div>

					<label class="col-sm-2 control-label" for="txtUserTel">联系方式</label>
					<div class="col-sm-4">
						<input type="text" class="form-control" id="txtUserTel"
							name="txtUserTel" value="${requestScope.usersB.usertel }"
							placeholder="联系方式">
					</div>
				</div>

			</div>

			<div class="row rowHeigth">
				<div class="form-group">
					<label class="col-sm-2 control-label" for="txtUserAddress">地址</label>
					<div class="col-sm-4">
						<input type="text" class="form-control" id="txtUserAddress"
							name="txtUserAddress" value="${requestScope.usersB.useraddress }"
							placeholder="地址">
					</div>


				</div>

			</div>

			<div class="row rowHeigth">
				<div class="form-group">
					<div class="col-sm-offset-4 col-sm-2">
						<button type="submit" class="btn btn-default">保存</button>
					</div>
					<div class="col-sm-offset-2 col-sm-4">
						<button type="reset" class="btn btn-default">重置</button>
					</div>
				</div>

			</div>

		</div>

	</form>


	
</body>
</html>